<!doctype html>
<!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单form</title>
<link  href="../css/public.css" rel="stylesheet">
<link href="../css/page.css" rel="stylesheet">
<link href="../css/form.css" rel="stylesheet">
<link href="../css/btns.css" rel="stylesheet">
<link href="../highlight/styles/github.css" rel="stylesheet">
</head>
<body>
<nav class="topNav"><!--页头--></nav>
<div class="wrapper-box inner">
	<h1 class="article-Title">表单&lt;form&gt;</h1>
	<h2>水平排列的表单</h2>
	<form class="form-horizontal">
		<fieldset>
			<legend class="fn-sr-only">订购套餐</legend>
			<p class="form-explain">尊敬的138xxxxx1234用户，请完善以下用户信息完成订购。</p>
			<div class="form-group">
				<label class="form-label" for="school">学校</label>
				<input type="text" class="form-input" id="school">
			</div>
			<div class="form-group">
				<label class="form-label" for="">年级</label>
				<select class="form-select" id="">
					<option>--请选择--</option>
					<option>一年级</option>
					<option>二年级</option>
					<option>三年级</option>
					<option>四年级</option>
				</select>	
				<label class="form-label" for="">班级</label>
				<select class="form-select" id="">
					<option>--请选择--</option>
					<option>一班</option>
					<option>二班</option>
					<option>三班</option>
				</select>	
			</div>
			<div class="form-group">
				<label class="form-label" for="">年级</label>
				<div class="dropdown" id="">
					<a href="javascript:void(0)" class="dropdown-toggle"><span class="dropdown-input"></span><i class="caret">&nbsp;</i></a>
					<ul class="dropdown-menu" role="menu">
						<li><a tabindex="-1" href="javascript:void(0)">一年级</a></li>
						<li><a tabindex="-1" href="javascript:void(0)">二年级</a></li>
						<li><a tabindex="-1" href="javascript:void(0)">三年级</a></li>
					</ul>
				</div>
				<label class="form-label" for="">班级</label>
				<div class="dropdown" id="">
					<a href="javascript:void(0)" class="dropdown-toggle"><span class="dropdown-input"></span><i class="caret">&nbsp;</i></a>
					<ul class="dropdown-menu">
						<li><a tabindex="-1" href="javascript:void(0)">一班</a></li>
						<li><a tabindex="-1" href="javascript:void(0)">二班</a></li>
						<li><a tabindex="-1" href="javascript:void(0)">三班</a></li>
					</ul>
				</div>
				<p class="form-tips fn-inline">模拟下拉框</p>
			</div>
			<div class="form-group">
				<label class="form-label">学生性别</label>
				<label class="label-radio"><input type="radio" name="sex">男</label>
				<label class="label-radio"><input type="radio" name="sex">女</label>
			</div>
			<div class="form-group">
				<label class="form-label">学生性别</label>
				<div class="radio">
					<label class="radio-btn checked"><input type="radio" name="sex1" checked>男</label>
					<label class="radio-btn"><input type="radio" name="sex1">女</label>
				</div>
				<p class="form-tips fn-inline">模拟单选框</p>
			</div>
			<div class="form-group">
				<label class="form-label">爱好</label>
				<label class="label-checkbox"><input type="checkbox" name="1">游泳</label>
				<label class="label-checkbox"><input type="checkbox" name="1">旅游</label>
				<label class="label-checkbox"><input type="checkbox" name="1">其他</label>
			</div>
			<div class="form-group">
				<label class="form-label">爱好</label>
				<div class="checkbox">
				  <label class="checkbox-btn"><input type="checkbox" name="1">游泳</label>
				  <label class="checkbox-btn"><input type="checkbox" name="1">旅游</label>
				  <label class="checkbox-btn"><input type="checkbox" name="1">其他</label>
				</div>
				<p class="form-tips fn-inline">模拟复选框</p>
			</div>
			<div class="form-group group-warning">
				<label class="form-label" for="phone">手机号</label>
				<input type="text" class="form-input" id="phone"><p class="form-tips fn-inline"><i class="icon icon-error"></i>请输入有效的手机号码</p>
			</div>
			<div class="form-group">
				<label class="form-label" for="y-combo">套餐选择</label>
				<input type="text" class="form-input" id="y-combo">
			</div>
			<div class="form-group">
				<label class="form-label" for="">建议</label>
				<div class="textarea fn-inline">
					<textarea class="textarea-box" id=""></textarea>
					<span class="textarea-count"><em>0</em>/10</span>
				</div>
			</div>
			<a class="btn btn-xl btn-primary">确认</a>
		</fieldset>	
	</form>
	<pre><code>&lt;form class=&quot;form-horizontal&quot;&gt;
	&lt;fieldset&gt;
		&lt;legend class=&quot;fn-sr-only&quot;&gt;订购套餐&lt;/legend&gt;
		&lt;p class=&quot;form-explain&quot;&gt;尊敬的138xxxxx1234用户，请完善以下用户信息完成订购。&lt;/p&gt;
		&lt;div class=&quot;form-group&quot;&gt;
			&lt;label class=&quot;form-label&quot; for=&quot;school&quot;&gt;学校&lt;/label&gt;
			&lt;input type=&quot;text&quot; class=&quot;form-input&quot; id=&quot;school&quot;&gt;
		&lt;/div&gt;
		...
		&lt;div class=&quot;form-group group-warning&quot;&gt;
			&lt;label class=&quot;form-label&quot;  for=&quot;phone&quot;&gt;手机号&lt;/label&gt;
			&lt;input type=&quot;text&quot; class=&quot;form-input&quot; id=&quot;phone&quot;&gt;
			&lt;p class=&quot;form-tips fn-inline&quot;&gt;&lt;i class=&quot;icon icon-error&quot;&gt;&lt;/i&gt;请输入有效的手机号码&lt;/p&gt;
		&lt;/div&gt;
		...
		&lt;a class=&quot;btn btn-xl btn-primary&quot;&gt;确认&lt;/a&gt;
	&lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
	<hr>
	<h2>文字在输入框上的表单</h2>
	<form class="form-placeholder">
		<fieldset>
			<legend class="fn-sr-only">用户登录</legend>
			<div class="form-group">
				<label class="form-label" for="username">请输入手机号码</label>
				<input type="text" class="input-username form-input" id="username">
				<p class="form-tips">请输入有效的手机号码</p>
			</div>
			<div class="form-group group-warning">
				<label class="form-label" for="password">请输入密码</label>
				<input type="password" class="input-password form-input" id="password"><i class="icon icon-error"></i>
				<p class="form-tips">6-16位字符，区分大小写</p>
			</div>
			<div class="form-group group-success">
				<label class="form-label" for="verifyCode21">请输入验证码</label>
				<input type="text" class="input-verifyCode form-input" id="verifyCode21">
				<img class="img-verifyCode" src="../images/default/verifyCode.jpg" alt="验证码"><a class="form-link" href="javascript:void(0)">换一张</a><i class="icon icon-right"></i>
			</div>
			<button type="button" class="btn btn-xl btn-primary" onClick="alertBox();">立即登录</button>
			<p><a href="javascript:void(0)" class="form-link">忘记密码？</a></p>
		</fieldset>
	</form>	
	<hr/>
	<h2>块状的表单</h2>
	<form class="form-block">
		<fieldset>
			<legend class="fn-sr-only">用户登录</legend>
			<div class="form-group">
				<label class="form-label" for="username1">手机/用户</label>
				<input type="text" class="form-input" id="username1">
			</div>
			<div class="form-group">
				<label class="form-label" for="password1">密码</label>
				<input type="text" class="form-input" id="password1">
			</div>
			<div class="form-group">
				<label class="form-label" for="verifyCode1">验证码</label>
				<input type="text" class="input-verifyCode form-input" id="verifyCode1">
				<img class="img-verifyCode" src="../images/default/verifyCode.jpg" alt="验证码"><a class="form-link" href="javascript:void(0)">换一张</a>
			</div>
			<p class="form-tips tips-error">验证码错误！</p>
			<button type="button" class="btn btn-xl btn-primary">登录</button>
			<p><a class="form-link" href="javascript:void(0)">忘记密码？</a> <a class="form-link" href="javascript:void(0)">开通新用户</a></p>
		</fieldset>
	</form>
	<hr/>
	<h2>内联的表单</h2>
	<form class="form-inline">
		<fieldset>
			<legend class="fn-sr-only">用户登录</legend>
			<div class="form-group">
				<label class="form-label" for="username2">手机/用户</label>
				<input type="text" class="form-input" id="username2">
			</div>
			<div class="form-group">
				<label class="form-label" for="password2">密码</label>
				<input type="text" class="form-input" id="password2">
			</div>
			<div class="form-group">
				<label class="form-label" for="verifyCode2">验证码</label>
				<input type="text" class="input-verifyCode form-input" id="verifyCode2">
				<img class="img-verifyCode" src="../images/default/verifyCode.jpg" alt="验证码"><a class="form-link" href="javascript:void(0)">换一张</a>
			</div>
			<button type="button" class="btn btn-s btn-primary">登录</button>
		</fieldset>
	</form>	
	<!--下拉框--><hr/>
	<h2>下拉框</h2>
	<div class="dropdown">
	  <span class="dropdown-toggle"><input type="text" class="dropdown-input" value="请选择"><i class="caret">&nbsp;</i></span>
	  <ul class="dropdown-menu">
		<li><a tabindex="-1" href="javascript:void(0)">11111111111111111</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">2222</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
			<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
			<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
	  </ul>
	</div>
	<div class="dropdown form-placeholder">
	  <span class="dropdown-toggle"><label class="form-label" for="dropdown01">请选择</label><input type="text" class="form-input dropdown-input" id="dropdown01"><i class="caret">&nbsp;</i></span>
	  <ul class="dropdown-menu">
		<li><a tabindex="-1" href="javascript:void(0)">11111111111111111</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">2222</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
			<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
			<li><a tabindex="-1" href="javascript:void(0)">3333</a></li>
		<li><a tabindex="-1" href="javascript:void(0)">4444</a></li>
	  </ul>
	</div>
	<!--单选框--><hr/>
	<h2>单选框<small>radio</small></h2>
	<div class="radio">
		<label class="radio-btn checked"><input type="radio" name="11" checked>单选框1</label>
		<label class="radio-btn"><input type="radio" name="11">单选框2</label>
		<label class="radio-btn"><input type="radio" name="11">单选框3</label>
	</div>
	<!--复选框--><hr/>
	<h2>复选框<small>checkbox</small></h2>
	<div class="checkbox">
	  <label class="checkbox-btn"><input type="checkbox" name="21">Option 1</label>
	  <label class="checkbox-btn"><input type="checkbox" name="21">Option 2</label>
	  <label class="checkbox-btn"><input type="checkbox" name="21">Option 3</label>
	</div>
	<!--计数输入框--><hr/>
	<h2>计数输入框<small>textarea</small></h2>
	<div class="textarea">
		<p class="textarea-count"><em>0</em>/10</p>
		<textarea class="textarea-box"></textarea>
	</div>
	<h2>搜索框</h2>
	<h3>默认带文字提示的下拉框</h3>
	<form class="form-search form-search01 form-placeholder">
		<label class="form-label" for="search">请输入搜索内容</label>
		<input type="text" class="form-input" id="search"><button type="submit" class="btn btn-primary">搜索</button>
	</form>
	<h3>带下拉的搜索框</h3>
	<div class="form-search form-search02">
		<input class="search-input" placeholder="课程搜索">
		<a href="javascript:" class="search-btn">搜索</a>
		<ul class="search-result">
			<li><a href="#">分享：CSS深入理解之float浮动</a></li>
			<li><a href="#">案例：CSS圆角进化论</a></li>
			<li><a href="#">案例：CSS Sprite雪碧图应用</a></li>
		</ul>
	</div>		
	<h2>上传文件</h2>
	<a class="btn btn-file" href="javascript:void(0)">
		上传
		<input type="file" value="上传">
	</a>
	<h2>进度条</h2>
	<div class="fn-w300">
		<div class="progress">
			<div class="progress-bar" style="width: 60%;"></div>
		</div>
	</div>
	
	<hr/>
	<img src="../images/form20140923.jpg" alt="表单命名说明">
	<footer class="footer"><!--页尾--></footer>
</div>	
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/myscript.js"></script>
<script src="../highlight/highlight.pack.js"></script>
<script>
 hljs.initHighlightingOnLoad('html','css');
</script>
</body>
</html>
